<template>
  <div class="h-full overflow-hidden border-box">
    <div class="h-full bg-white overflow-auto p-10px">
      <div text-30 font-400>按钮 Button</div>
      <div mt-10>按钮用来触发一些操作。</div>
      <div text-20 mt-10>演示</div>
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <div border="1 blueGray" p-20>
            <div text-20>基础</div>
            <n-space>
              <n-button>Default</n-button>
              <n-button type="tertiary"> Tertiary </n-button>
              <n-button type="primary"> Primary </n-button>
              <n-button type="info"> Info </n-button>
              <n-button type="success"> Success </n-button>
              <n-button type="warning"> Warning </n-button>
              <n-button type="error"> Error </n-button>
            </n-space>
          </div>
        </n-gi>
        <n-gi>
          <div p-20 border="1 blueGray">
            <div text-20>基础</div>
            <n-space>
              <n-button strong secondary> Default </n-button>
              <n-button strong secondary type="tertiary"> Tertiary </n-button>
              <n-button strong secondary type="primary"> Primary </n-button>
              <n-button strong secondary type="info"> Info </n-button>
              <n-button strong secondary type="success"> Success </n-button>
              <n-button strong secondary type="warning"> Warning </n-button>
              <n-button strong secondary type="error"> Error </n-button>
              <n-button strong secondary round> Default </n-button>
              <n-button strong secondary round type="primary"> Primary </n-button>
              <n-button strong secondary round type="info"> Info </n-button>
              <n-button strong secondary round type="success"> Success </n-button>
              <n-button strong secondary round type="warning"> Warning </n-button>
              <n-button strong secondary round type="error"> Error </n-button>
              <n-button strong secondary circle>
                <template #icon>
                  <n-icon><IconMenu /></n-icon>
                </template>
              </n-button>
              <n-button strong secondary circle type="primary">
                <template #icon>
                  <n-icon><IconMenu /></n-icon>
                </template>
              </n-button>
              <n-button strong secondary circle type="info">
                <template #icon>
                  <n-icon><IconMenu /></n-icon>
                </template>
              </n-button>
              <n-button strong secondary circle type="success">
                <template #icon>
                  <n-icon><IconMenu /></n-icon>
                </template>
              </n-button>
              <n-button strong secondary circle type="warning">
                <template #icon>
                  <n-icon><IconMenu /></n-icon>
                </template>
              </n-button>
              <n-button strong secondary circle type="error">
                <template #icon>
                  <n-icon><IconMenu /></n-icon>
                </template>
              </n-button>
            </n-space>
          </div>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
console.log(ref);
import { IconMenu } from '@/components/app-icons/index.js';
</script>

<style scoped></style>
